import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Type, EventCenter } from '@utils/Global'
import { DmAction } from '@act'

class DmItem extends Component {
  clickZan = () => {
    const { item, dispatch } = this.props
    if (item.type === Type.COMMON_TYPE.COMMON_DM_QUESTION
      && item.data.question
      && item.data.question.id > 0
      && !item.data.question.like) {
      dispatch(DmAction.doSelfLikeDmItem({ msgType: 'question', id: item.data.question.id }))
      let msg = {
        type: Type.COMMON_TYPE.COMMON_DM_QUESTION_UP,
        data: { question_id: item.data.question.id }
      }
      EventCenter.emit('send_msg_to_socket', msg)
    }
  }
  renderTeacherIcon() {
    const { item } = this.props
    return item.sender.is_teacher ? <span className="dm_teacher">讲师</span> : null
  }
  renderQuestionIcon() {
    const { item } = this.props
    return item.type === Type.COMMON_TYPE.COMMON_DM_QUESTION ? <span className="dm_question_flag">提问</span> : null
  }
  renderAnswerDetail() {
    const { item } = this.props
    let nickname = item.data.question.user.nickname || item.data.question.user.name
    let text = `回复 ${nickname} 的提问: ${item.data.answer.data.text}`
    return  <span className="dm_text">{text}</span>
  }
  renderDetail() {
    const { item } = this.props
    if (item.type === Type.COMMON_TYPE.COMMON_DM_ANSWER) {
      return this.renderAnswerDetail()
    }
    let text = item.type === Type.COMMON_TYPE.COMMON_DM_QUESTION ? item.data.question.data.text : item.data.text
    return  <span className="dm_text">{text}</span>
  }
  renderZan() {
    const { item } = this.props
    if (item.type !== Type.COMMON_TYPE.COMMON_DM_QUESTION) { return null }
    let icon = require(`@images/question/list_zan_icon${item.data.question.like ? '_active' : ''}.png`)
    return (
      <div className={`zan_con ${item.data.question.like ? 'active' : ''}`}>
        <img onClick={this.clickZan} className="zan_icon" src={icon} alt=""/>
        <span className="zan_text">+{item.data.question.up_num}</span>
      </div>
    )
  }
  renderSystemDmTip() {
    const { item, index, color_theme } = this.props
    return (
      <div className={`dm_item`} id={'dm_' + index}>
        <div className="dm_system_content">
          <img className="dm_system_icon" src={require('@images/dm_system_icon.png')} alt=""/>
          <div className="dm_system_text">{item.data.text}</div>
        </div>
      </div>
    )
  }
  render() {
    const { item, index, color_theme } = this.props
    if (item.type === Type.COMMON_TYPE.COMMON_SYSTEM_TIP) {
      return this.renderSystemDmTip()
    }
    let colorSuffix = color_theme === 'red' ? ' red' : ''
    let questionSuffix = item.type === Type.COMMON_TYPE.COMMON_DM_QUESTION ? ' question' : ''
    return (
      <div className={`dm_item${colorSuffix}${questionSuffix}`} id={'dm_' + index}>
        <div className="dm_head">
          <img src={ item.sender.headimgurl }/>
        </div>
        <div className="dm_detail">
          <span className="dm_name">{ item.sender.nickname }</span>
          { this.renderTeacherIcon() }
          { this.renderQuestionIcon() }
          { this.renderDetail() }
          { this.renderZan() }
        </div>
      </div>
    )
  }
}
const mapStateTopProps = (state) => {
  return {
    color_theme: state.MainScreenState.info.color_theme
  }
}
export default connect(mapStateTopProps)(DmItem)
